var app = getApp()

import {
  getLabelControl,
  orderLabel,
  addLabel,
  deleteLabel,
  updateLabel,
  changeLabelGroup,
  addLabelGroup,
  deleteLabelGroup,
  updateLabelGroup,
  switchLabelGroup,
  groupOrderUp,
  groupOrderDown,
} from '../../../api/douyin'

Component({
  data: {
    popupHeight: 0, // 弹出层的高度 - 整个屏幕的高度
    contentHeight: 0, // 滑动内容区域的高度（整屏高度减去胶囊高度）
    movableItem: [], // 主数组
    layerItem: [], // 副数组
    show: false, // 显示隐藏弹出层

    //当前选中滑块的id
    selectId: 0,
    boxHeight: 0, // 容器总高度
    itemHeight: 51, // 滑块总高度,即滑块本身加上边距的高度
    // 列表
    list: [],
    grouplist: [],

  },

  properties: {},

  ready() {
    // 系统屏幕位置信息
    const systemInfo = wx.getSystemInfoSync()
    // console.log('systemInfo', systemInfo)

    // 胶囊位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
    // console.log('menuButtonInfo', menuButtonInfo)

    // 单位间距（胶囊距屏幕右侧的距离）
    // this.setData({
    //   dp: systemInfo.screenWidth - menuButtonInfo.right,
    // })

    // 胶囊位置
    // this.setData(Object.assign(this.data, menuButtonInfo))

    this.setData({
      popupHeight: systemInfo.screenHeight, // 整个屏幕的高度
      contentHeight: systemInfo.screenHeight - menuButtonInfo.bottom, // 滑动内容区域的高度（整屏高度减去胶囊高度）(ios底部40高度不用管)
    })

  },

  methods: {

    // ##########################################################################################
    // # Popup弹出层模块
    // ##########################################################################################

    /******************** 组件页面全屏弹出框 ********************/

    // 打开弹出层
    onPopupOpen() {
      this.handleLabelsInit()
      this.setData({
        show: true,
      })
    },

    // 收起弹出层
    onPopupHide() {
      this.setData({
        show: false,
      })
      this.triggerEvent("hidepopup")
    },

    // 打开动作面板
    onOpenActionSheet() {
      wx.showActionSheet({
        itemList: ['新建标签', '新建分组'],
        success: res => {
          // 新建标签
          if (res.tapIndex == 0)
            wx.showModal({
              title: '新建标签',
              showCancel: true,
              editable: true,
              placeholderText: '请输入标签名',
              success: res => {
                if (res.confirm) {
                  this.handleLabelAdd(res.content)
                }
              }
            })
          // 新建分组
          if (res.tapIndex == 1)
            wx.showModal({
              title: '新建分组',
              showCancel: true,
              editable: true,
              placeholderText: '请输入分组名',
              success: res => {
                if (res.confirm) {
                  this.handleLabelGroupAdd(res.content)
                }
              }
            })
          // 刷新列表
          // if (res.tapIndex == 2)
          //   this.handleLabelsInit()
        }
      })
    },

    /******************** 列表项拖拽排序 ********************/

    // 点击到滑块时切换隐藏显示
    unlockItem(e) {
      this.setData({
        selectId: e.currentTarget.dataset.id
      })
    },

    // 拖动滑块
    touchMove(e) {
      // 过滤掉非拖动行为下产生的触发条件
      if (e.detail.source !== 'touch')
        return false

      let {
        itemHeight,
        layerItem,
      } = this.data
      let list = [...layerItem]
      let id = e.currentTarget.dataset.id // 当前滑块ID
      let centerY = e.detail.y + itemHeight / 2 // 当前选中滑块的中心的y坐标
      let key = 0 // 滑块滑动时的位置
      let index = 0 // 滑块滑动前的位置

      // 通过id判断当前滑块的index
      layerItem.forEach(item => {
        if (item.id === id)
          index = item.index
      })

      // 根据当前滑块位置确认当前所处在哪个区域
      for (let i = 0; i < list.length + 1; i++) {
        let y1 = i * itemHeight // 第n个区域顶部y坐标
        let y2 = y1 + itemHeight // 第n个区域底部y坐标
        //判断当前滑块所属区域
        if (centerY > y1 && centerY < y2) {
          key = i
        }
      }

      // 当key值大于数组长度时，即数组长度为奇数，滑块位于容器右下方无滑块的位置，滑块实际的key值为数组长度减一
      if (key >= list.length - 1) {
        key = list.length - 1
      }

      // 滑动时位置与滑动前不同时
      if (index != key) {
        // 计算数组中其他数据变化后的index
        list.forEach((item, i) => {
          if (item.id != id) {
            // index前进到key位置
            if (index > key) {
              if (item.index >= key && item.index < index) {
                item.index = item.index + 1
              }
            }
            // index后退到key位置
            if (index < key) {
              if (item.index > index && item.index <= key) {
                item.index = item.index - 1
              }
            }
          } else {
            item.index = key
          }
        })

        // 根据数据变化后的index计算改变顺序后的实际位置
        list.forEach((item, i) => {
          item.y = item.index * itemHeight
        })

        // 显示数据到页面
        this.setData({
          layerItem: list,
          key,
          index
        })
      }

    },

    // 停止拖动，两数组同步
    touchend(e) {
      this.setData({
        movableItem: this.data.layerItem,
      })

      // 标签排序
      let arr = []
      this.data.movableItem.forEach((element) => {
        arr.push({
          id: element.id,
          index: element.index,
          type: element.type,
        })
      })

      // 更新标签排序
      this.handleOrderLabel(arr)
    },

    /******************** 列表项目的回调事件 ********************/

    // 打开滑动单元格
    onSwipeOpen(e) {
      this.setData({
        selectId: 0, // 重置拖拽滑动选择项
      })
    },

    // 列表项点击
    onBtnItem(e) {
      const id = e.currentTarget.dataset.id
      this.setData({
        selectId: 0, // 重置拖拽滑动选择项
      })
    },

    // 改名按钮点击
    onBtnRename(e) {
      const type = e.detail.type
      const name = e.detail.name
      const id = e.currentTarget.dataset.id
      wx.showModal({
        title: '标签改名',
        content: name,
        showCancel: true,
        editable: true,
        placeholderText: '请输入标签名',
        success: res => {
          if (res.confirm) {
            if (type == 'content')
              this.handleLabelRename(id, res.content)
            if (type == 'title')
              this.handleLabelGroupRename(id, res.content)
          }
        }
      })
    },

    // switch开关1
    onSwitchChecked1(e) {
      const id = e.currentTarget.dataset.id
      const checked = e.detail
      this.handleLabelGroupSwitch(id, checked, 1)
    },

    // switch开关2
    onSwitchChecked2(e) {
      const id = e.currentTarget.dataset.id
      const checked = e.detail
      this.handleLabelGroupSwitch(id, checked, 2)
    },

    // 删除按钮点击
    onBtnDelete(e) {
      const type = e.detail.type
      const name = e.detail.name
      const id = e.currentTarget.dataset.id
      wx.showModal({
        title: '删除',
        content: "确认删除此" + (type == 'content' ? '标签' : '分组') + "吗？\n" + name,
        confirmColor: '#E54D42',
        success: res => {
          if (res.confirm) {
            if (type == 'content')
              this.handleLabelDelete(id)
            if (type == 'title')
              this.handleLabelGroupDelete(id)
          }
        }
      })
    },

    // 分组按钮点击
    onBtnGroup(e) {
      const id = e.currentTarget.dataset.id
      const groupid = e.detail.groupid
      const groupname = e.detail.groupname
      changeLabelGroup(id, groupid).then(res => {
        if (res.status == 200) {
          app.showToast('操作成功')
          this.handleLabelsInit()
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 上移按钮点击
    onGroupOrderUp(e) {
      const id = e.currentTarget.dataset.id
      groupOrderUp(id).then(res => {
        if (res.status == 200) {
          console.log('res', res)
          app.showToast('操作成功')
          this.handleLabelsInit()
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 下移按钮点击
    onGroupOrderDown(e) {
      const id = e.currentTarget.dataset.id
      groupOrderDown(id).then(res => {
        if (res.status == 200) {
          console.log('res', res)
          app.showToast('操作成功')
          this.handleLabelsInit()
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // ##########################################################################################
    // # 云服务接口
    // ##########################################################################################

    // 加载标签列表
    async handleLabelsInit() {
      // 加载标签列表
      const res = await getLabelControl()
      if (res.status === 200) {
        this.setData({
          list: res.data.list,
          grouplist: res.data.grouplist,
        })
      } else {
        app.showToast(res.msg)
        return false
      }

      let list = this.data.list
      let itemHeight = this.data.itemHeight

      list.forEach((item, i) => {
        item.y = i * itemHeight //区域左上角纵坐标
        item.index = i
      })

      this.setData({
        movableItem: list,
        layerItem: list,
        boxHeight: list.length * itemHeight + 40, // 容器总高度
      })
    },

    // 标签排序
    handleOrderLabel(arr) {
      orderLabel(arr).then(res => {
        this.handleLabelsInit()
        if (res.status != 200) {
          app.showToast(res.msg)
        }
      })
    },

    // 标签新建
    handleLabelAdd(name) {
      addLabel(name).then(res => {
        if (res.status === 200) {
          app.showToast('操作成功')
          this.handleLabelsInit()
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 标签删除
    handleLabelDelete(id) {
      deleteLabel(id).then(res => {
        if (res.status === 200) {
          if (res.data.code == 203) {
            app.showModal(res.data.ids, "标签使用中，项目ID是")
          } else {
            app.showToast('操作成功')
            this.handleLabelsInit()
          }
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 标签改名
    handleLabelRename(id, name) {
      updateLabel({
        id,
        name,
      }).then(res => {
        if (res.status === 200) {
          app.showToast('操作成功')
          this.handleLabelsInit()
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 标签分组新建
    handleLabelGroupAdd(name) {
      addLabelGroup(name).then(res => {
        if (res.status === 200) {
          app.showToast('操作成功')
          this.handleLabelsInit()
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 标签分组删除
    handleLabelGroupDelete(id) {
      deleteLabelGroup(id).then(res => {
        if (res.status === 200) {
          app.showToast('操作成功')
          this.handleLabelsInit()
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 标签分组改名
    handleLabelGroupRename(id, name) {
      updateLabelGroup({
        id,
        name,
      }).then(res => {
        if (res.status === 200) {
          app.showToast('操作成功')
          this.handleLabelsInit()
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 标签分组开关
    handleLabelGroupSwitch(id, checked, type) {
      switchLabelGroup(id, checked, type).then(res => {
        if (res.status != 200) {
          this.handleLabelsInit()
          app.showToast(res.msg)
        }
      })
    },

    // ##########################################################################################
    // # 
    // ##########################################################################################

    // ##########################################################################################

  }
})